<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../resources/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/json2.js" type="text/javascript"></script>
    <link href="../../resources/lib/all.css" rel="stylesheet" />
    <script src="../../resources/lib/ligerui.all.js" type="text/javascript"></script>
    <script type="text/javascript">

        var EmployeeData = { Rows: [{  "UserName":"admin",
                                            "PassWord":"123",
                                            "RealName":"韩长军",
                                            "RealName1": "国庆节",
                                            'Text2':"无",
                                            'Age':"35",
                                            "DepartmentName": "研发部",
                                            "CompetenceName": "超级管理员" },
                                            {  "UserName":"admin",
                                                "PassWord":"123",
                                                "RealName":"韩长军",
                                                "RealName1": "国庆节",
                                                'Text2':"无",
                                                'Age':"35",
                                                "DepartmentName": "市场部",
                                                "CompetenceName": "超级管理员"},
                                            {  "UserName":"admin",
                                                "PassWord":"123",
                                                "RealName":"韩长军",
                                                "RealName1": "国庆节",
                                                'Text2':"无",
                                                'Age':"35",
                                                "DepartmentName": "工程部",
                                                "CompetenceName": "制卡专员"}], Total: 3 };
        var DepartmentData = { Rows: [{ "Competence": 1, "CompetenceName": "超级管理员" ,"DepartmentID": 1, "DepartmentName": "研发部"},
                                            { "Competence": 2, "CompetenceName": "系统管理员","DepartmentID": 2, "DepartmentName": "市场部" },
                                            { "Competence": 3, "CompetenceName": "制卡专员","DepartmentID": 3, "DepartmentName": "工程部" },
                                            { "Competence": 4, "CompetenceName": "人事专员","DepartmentID": 4, "DepartmentName": "商务部"},
                                            { "Competence": 5, "CompetenceName": "安保人员","DepartmentID": 5, "DepartmentName": "质检部"}], Total: 5 };
        var DepartmentList = DepartmentData.Rows;
        var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}];
        $(f_initGrid);
        var manager, g;
        function f_initGrid()
        {
            g = manager = $("#maingrid").ligerGrid({
                //toolbar: {},
                //title : 'gg',
                columns: [
                    { display: '账号', name: 'UserName', width: 100, isSort: false,
                        editor: { type: 'text' }
//                        , render: function (item)
//                    {
//                        for (var i = 0; i < DepartmentList.length; i++)
//                        {
//                            if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
//                                return DepartmentList[i]['DepartmentName']
//                        }
//                        return item.DepartmentName;
//                    }
                    },
                    { display: '姓名', name: 'RealName', width: 100 ,
                        editor: { type: 'text' }
                    },
                    { display: '性别', width: 50, name: 'Sex', type: 'int',
                        editor: { type: 'select', data: sexData, valueField: 'Sex' },
                        render: function (item)
                        {
                            if (parseInt(item.Sex) == 1) return '男';
                            return '女';
                        }
                    },
                    { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} },
                    { display: '所属部门', name: 'DepartmentID', width: 100, isSort: false,
                        editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' }, render: function (item)
                    {
                        for (var i = 0; i < DepartmentList.length; i++)
                        {
                            if (DepartmentList[i]['DepartmentID'] == item.DepartmentID)
                                return DepartmentList[i]['DepartmentName']
                        }
                        return item.DepartmentName;
                    }
                    },
                    { display: '权限分配', name: 'Competence', width: 150, isSort: false,
                        editor: { type: 'select', data: DepartmentList, valueField: 'Competence', textField: 'CompetenceName' }, render: function (item)
                    {
                        for (var i = 0; i < DepartmentList.length; i++)
                        {
                            if (DepartmentList[i]['Competence'] == item.Competence)
                                return DepartmentList[i]['CompetenceName']
                        }
                        return item.CompetenceName;
                    }
                    },
                    { display: '备注', name: 'Text2', width: 150,
                        editor: { type: 'text' }
                    },
                    { display: '操作', isSort: false, width: 120, render: function (rowdata, rowindex, value)
                    {
                        var h = "";
                        if (!rowdata._editing)
                        {
                            h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
                            h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> ";
                        }
                        else
                        {
                            h += "<a href='javascript:endEdit(" + rowindex + ")'>提交</a> ";
                            h += "<a href='javascript:cancelEdit(" + rowindex + ")'>取消</a> ";
                        }
                        return h;
                    }
                    }
                ],

                onSelectRow: function (rowdata, rowindex)
                {
                    $("#txtrowindex").val(rowindex);
                },
                enabledEdit: true,clickToEdit:false, isScroll: false,checkbox:false,rownumbers:true,
                data: EmployeeData,
                width: '100%'
            });
        }
        function beginEdit(rowid) {
            manager.beginEdit(rowid);
        }
        function cancelEdit(rowid) {
            manager.cancelEdit(rowid);
        }
        function endEdit(rowid)
        {
            manager.endEdit(rowid);
        }

        function deleteRow(rowid)
        {
            if (confirm('确定删除?'))
            {
                manager.deleteRow(rowid);
            }
        }
        var newrowid = 100;
        function addNewRow()
        {
            manager.addEditRow();
        }

        function getSelected()
        {
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData()
        {
            var data = manager.getData();
            alert(JSON.stringify(data));
            alert("保存成功");
        }
    </script>
</head>
<body  style="padding:10px">
<a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="addNewRow()">添加</a>
<div class="l-clear"></div>
<div id="maingrid" style="margin-top:20px"></div> <br />
<div style="display:none;">
</div>
</body>
</html>
